<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css" rel="stylesheet" crossorigin="anonymous">
    <!-- <link href="./bootstrap.css" rel="stylesheet" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="./bootstrap.css">
    <style>
       *{
        box-sizing: border-box;
        border: 1px solid red;
       }
    </style>
</head>

<body>
    <!-- <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
        </li>
      </ul>
      <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
            <img src="./images/1-1Q011154T12c.png" alt=""></div>
        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
        <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
      </div> -->

      <div class="container text-center">
        <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
          <div class="col col-sm-2  ">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
          <div class="col col-sm-2">
            <div class="p-3">Row column</div>
          </div>
        </div>
      </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.js"
        crossorigin="anonymous"></script>
        <!-- <script src="./bootstrap.bundle.js" crossorigin="anonymous"></script> -->
        <!-- <script src="./bootstrap.bundle.js"></script> -->
</body>

</html>